<template>
  <div class="activeness">
    <!-- 页面主体 -->
    <v-main>
      <!-- 店铺数据总览 -->
      <div class="activeness-summary">
        <!-- 总览标题栏 -->
        <div class="summary-title clearfix">
          <div class="name">昨日关键指标</div>
        </div>
        <!-- 总览内容 -->
        <div class="summary-main clearfix">
          <!-- 总览 - 日活跃顾客数 -->
          <div class="summary-wrapper">
            <div class="summary-item">
              <div class="label">
                <span>DAU（日活跃顾客数）</span>
              </div>
              <div class="value">
                <i-count-up :startVal="0"
                          :endVal="keyIndicator.dau.customer_num ? Number.parseFloat(keyIndicator.dau.customer_num) : 0"
                          :decimals="0"
                          :duration="2"
                          :options="cuConfig">
                </i-count-up>
              </div>
              <div class="desc">
                <div class="compare">
                  <span :class="[ 'num', Number.parseFloat(keyIndicator.dau.daily) > 0 ? 'rise' : Number.parseFloat(keyIndicator.dau.daily) < 0 ? 'fall' : '' ]">
                    日: {{ keyIndicator.dau.daily === null || keyIndicator.dau.daily === undefined ? '该日无数据，无法展示' : keyIndicator.dau.daily }}</span>
                  <span :class="[ 'mom', Number.parseFloat(keyIndicator.dau.daily) > 0 ? 'rise' : Number.parseFloat(keyIndicator.dau.daily) < 0 ? 'fall' : '' ]">
                    <i class="iconfont" v-show="Number.parseFloat(keyIndicator.dau.daily) > 0">&#xe6ca;</i>
                    <i class="iconfont" v-show="Number.parseFloat(keyIndicator.dau.daily) < 0">&#xe6cb;</i>
                  </span>
                </div>
                <div class="compare">
                  <span :class="[ 'num', Number.parseFloat(keyIndicator.dau.weekly) > 0 ? 'rise' : Number.parseFloat(keyIndicator.dau.weekly) < 0 ? 'fall' : '' ]">
                    周: {{ keyIndicator.dau.weekly === null || keyIndicator.dau.weekly === undefined ? '该日无数据，无法展示' : keyIndicator.dau.weekly }}
                  </span>
                  <span :class="[ 'mom', Number.parseFloat(keyIndicator.dau.weekly) > 0 ? 'rise' : Number.parseFloat(keyIndicator.dau.weekly) < 0 ? 'fall' : '' ]">
                  <i class="iconfont" v-show="Number.parseFloat(keyIndicator.dau.weekly) > 0">&#xe6ca;</i>
                  <i class="iconfont" v-show="Number.parseFloat(keyIndicator.dau.weekly) < 0">&#xe6cb;</i>
                  </span>
                </div>
                <div class="compare">
                  <span :class="[ 'num', Number.parseFloat(keyIndicator.dau.monthly) > 0 ? 'rise' : Number.parseFloat(keyIndicator.dau.monthly) < 0 ? 'fall' : '' ]">
                    月: {{ keyIndicator.dau.monthly === null || keyIndicator.dau.monthly === undefined ? '该日无数据，无法展示' : keyIndicator.dau.monthly }}
                  </span>
                  <span :class="[ 'mom', Number.parseFloat(keyIndicator.dau.monthly) > 0 ? 'rise' : Number.parseFloat(keyIndicator.dau.monthly) < 0 ? 'fall' : '' ]">
                  <i class="iconfont" v-show="Number.parseFloat(keyIndicator.dau.monthly) > 0">&#xe6ca;</i>
                  <i class="iconfont" v-show="Number.parseFloat(keyIndicator.dau.monthly) < 0">&#xe6cb;</i>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <!-- 总览 - 周活跃顾客数 -->
          <div class="summary-wrapper">
            <div class="summary-item">
              <div class="label">
                <span>WAU（周活跃顾客数）</span>
              </div>
              <div class="value">
                <i-count-up :startVal="0"
                          :endVal="keyIndicator.wau.customer_num ? Number.parseFloat(keyIndicator.wau.customer_num) : 0"
                          :decimals="0"
                          :duration="2"
                          :options="cuConfig">
                </i-count-up>
              </div>
              <div class="desc">
                <div class="compare">
                  <span :class="[ 'num', Number.parseFloat(keyIndicator.wau.daily) > 0 ? 'rise' : Number.parseFloat(keyIndicator.wau.daily) < 0 ? 'fall' : '' ]">
                    日: {{ keyIndicator.wau.daily === null || keyIndicator.wau.daily === undefined ? '该日无数据，无法展示' : keyIndicator.wau.daily }}</span>
                  <span :class="[ 'mom', Number.parseFloat(keyIndicator.wau.daily) > 0 ? 'rise' : Number.parseFloat(keyIndicator.wau.daily) < 0 ? 'fall' : '' ]">
                    <i class="iconfont" v-show="Number.parseFloat(keyIndicator.wau.daily) > 0">&#xe6ca;</i>
                    <i class="iconfont" v-show="Number.parseFloat(keyIndicator.wau.daily) < 0">&#xe6cb;</i>
                  </span>
                </div>
                <div class="compare">
                  <span :class="[ 'num', Number.parseFloat(keyIndicator.wau.weekly) > 0 ? 'rise' : Number.parseFloat(keyIndicator.wau.weekly) < 0 ? 'fall' : '' ]">
                    周: {{ keyIndicator.wau.weekly === null || keyIndicator.wau.weekly === undefined ? '该日无数据，无法展示' : keyIndicator.wau.weekly }}
                  </span>
                  <span :class="[ 'mom', Number.parseFloat(keyIndicator.wau.weekly) > 0 ? 'rise' : Number.parseFloat(keyIndicator.wau.weekly) < 0 ? 'fall' : '' ]">
                  <i class="iconfont" v-show="Number.parseFloat(keyIndicator.wau.weekly) > 0">&#xe6ca;</i>
                  <i class="iconfont" v-show="Number.parseFloat(keyIndicator.wau.weekly) < 0">&#xe6cb;</i>
                  </span>
                </div>
                <div class="compare">
                  <span :class="[ 'num', Number.parseFloat(keyIndicator.wau.monthly) > 0 ? 'rise' : Number.parseFloat(keyIndicator.wau.monthly) < 0 ? 'fall' : '' ]">
                    月: {{ keyIndicator.wau.monthly === null || keyIndicator.wau.monthly === undefined ? '该日无数据，无法展示' : keyIndicator.wau.monthly }}
                  </span>
                  <span :class="[ 'mom', Number.parseFloat(keyIndicator.wau.monthly) > 0 ? 'rise' : Number.parseFloat(keyIndicator.wau.monthly) < 0 ? 'fall' : '' ]">
                  <i class="iconfont" v-show="Number.parseFloat(keyIndicator.wau.monthly) > 0">&#xe6ca;</i>
                  <i class="iconfont" v-show="Number.parseFloat(keyIndicator.wau.monthly) < 0">&#xe6cb;</i>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <!-- 总览 - 累计新增顾客 -->
          <div class="summary-wrapper">
            <div class="summary-item">
              <div class="label">
                <span>MAU（月活跃顾客数）</span>
              </div>
              <div class="value">
                <i-count-up :startVal="0"
                          :endVal="keyIndicator.mau.customer_num ? Number.parseFloat(keyIndicator.mau.customer_num) : 0"
                          :decimals="0"
                          :duration="2"
                          :options="cuConfig">
                </i-count-up>
              </div>
              <div class="desc">
                <div class="compare">
                  <span :class="[ 'num', Number.parseFloat(keyIndicator.mau.daily) > 0 ? 'rise' : Number.parseFloat(keyIndicator.mau.daily) < 0 ? 'fall' : '' ]">
                    日: {{ keyIndicator.mau.daily === null || keyIndicator.mau.daily === undefined ? '该日无数据，无法展示' : keyIndicator.mau.daily }}</span>
                  <span :class="[ 'mom', Number.parseFloat(keyIndicator.mau.daily) > 0 ? 'rise' : Number.parseFloat(keyIndicator.mau.daily) < 0 ? 'fall' : '' ]">
                    <i class="iconfont" v-show="Number.parseFloat(keyIndicator.mau.daily) > 0">&#xe6ca;</i>
                    <i class="iconfont" v-show="Number.parseFloat(keyIndicator.mau.daily) < 0">&#xe6cb;</i>
                  </span>
                </div>
                <div class="compare">
                  <span :class="[ 'num',Number.parseFloat(keyIndicator.mau.weekly) > 0 ? 'rise' : Number.parseFloat(keyIndicator.mau.weekly) < 0 ? 'fall' : '' ]">
                    周: {{ keyIndicator.mau.weekly === null || keyIndicator.mau.weekly === undefined ? '该日无数据，无法展示' : keyIndicator.mau.weekly }}
                  </span>
                  <span :class="[ 'mom', Number.parseFloat(keyIndicator.mau.weekly) > 0 ? 'rise' : Number.parseFloat(keyIndicator.mau.weekly) < 0 ? 'fall' : '' ]">
                  <i class="iconfont" v-show="Number.parseFloat(keyIndicator.mau.weekly) > 0">&#xe6ca;</i>
                  <i class="iconfont" v-show="Number.parseFloat(keyIndicator.mau.weekly) < 0">&#xe6cb;</i>
                  </span>
                </div>
                <div class="compare">
                  <span :class="[ 'num', Number.parseFloat(keyIndicator.mau.monthly) > 0 ? 'rise' : Number.parseFloat(keyIndicator.mau.monthly) < 0 ? 'fall' : '' ]">
                    月: {{ keyIndicator.mau.monthly === null || keyIndicator.mau.monthly === undefined ? '该日无数据，无法展示' : keyIndicator.mau.monthly }}
                  </span>
                  <span :class="[ 'mom', Number.parseFloat(keyIndicator.mau.monthly) > 0 ? 'rise' : Number.parseFloat(keyIndicator.mau.monthly) < 0 ? 'fall' : '' ]">
                  <i class="iconfont" v-show="Number.parseFloat(keyIndicator.mau.monthly) > 0">&#xe6ca;</i>
                  <i class="iconfont" v-show="Number.parseFloat(keyIndicator.mau.monthly) < 0">&#xe6cb;</i>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <!-- 总览 - DAU/WAU -->
          <div class="summary-wrapper">
            <div class="summary-item">
              <div class="label">
                <span>DAU/WAU</span>
              </div>
              <div class="value">
                <i-count-up :startVal="0"
                          :endVal="keyIndicator.dau_wau.customer_num ? Number.parseFloat(keyIndicator.dau_wau.customer_num) : 0"
                          :decimals="2"
                          :duration="2"
                          :options="cuConfig">
                </i-count-up>
              </div>
              <div class="desc">
                <div class="compare">
                  <span :class="[ 'num', Number.parseFloat(keyIndicator.dau_wau.daily) > 0 ? 'rise' : Number.parseFloat(keyIndicator.dau_wau.daily) < 0 ? 'fall' : '' ]">
                    日: {{ keyIndicator.dau_wau.daily === null || keyIndicator.dau_wau.daily === undefined ? '该日无数据，无法展示' : keyIndicator.dau_wau.daily }}</span>
                  <span :class="[ 'mom', Number.parseFloat(keyIndicator.dau_wau.daily) > 0 ? 'rise' : Number.parseFloat(keyIndicator.dau_wau.daily) < 0 ? 'fall' : '' ]">
                    <i class="iconfont" v-show="Number.parseFloat(keyIndicator.dau_wau.daily) > 0">&#xe6ca;</i>
                    <i class="iconfont" v-show="Number.parseFloat(keyIndicator.dau_wau.daily) < 0">&#xe6cb;</i>
                  </span>
                </div>
                <div class="compare">
                  <span :class="[ 'num', Number.parseFloat(keyIndicator.dau_wau.weekly) > 0 ? 'rise' : Number.parseFloat(keyIndicator.dau_wau.weekly) < 0 ? 'fall' : '' ]">
                    周: {{ keyIndicator.dau_wau.weekly === null || keyIndicator.dau_wau.weekly === undefined ? '该日无数据，无法展示' : keyIndicator.dau_wau.weekly }}
                  </span>
                  <span :class="[ 'mom', Number.parseFloat(keyIndicator.dau_wau.weekly) > 0 ? 'rise' : Number.parseFloat(keyIndicator.dau_wau.weekly) < 0 ? 'fall' : '' ]">
                  <i class="iconfont" v-show="Number.parseFloat(keyIndicator.dau_wau.weekly) > 0">&#xe6ca;</i>
                  <i class="iconfont" v-show="Number.parseFloat(keyIndicator.dau_wau.weekly) < 0">&#xe6cb;</i>
                  </span>
                </div>
                <div class="compare">
                  <span :class="[ 'num', Number.parseFloat(keyIndicator.dau_wau.monthly) > 0 ? 'rise' : Number.parseFloat(keyIndicator.dau_wau.monthly) < 0 ? 'fall' : '' ]">
                    月: {{ keyIndicator.dau_wau.monthly === null || keyIndicator.dau_wau.monthly === undefined ? '该日无数据，无法展示' : keyIndicator.dau_wau.monthly }}
                  </span>
                  <span :class="[ 'mom', Number.parseFloat(keyIndicator.dau_wau.monthly) > 0 ? 'rise' : Number.parseFloat(keyIndicator.dau_wau.monthly) < 0 ? 'fall' : '' ]">
                  <i class="iconfont" v-show="Number.parseFloat(keyIndicator.dau_wau.monthly) > 0">&#xe6ca;</i>
                  <i class="iconfont" v-show="Number.parseFloat(keyIndicator.dau_wau.monthly) < 0">&#xe6cb;</i>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <!-- 总览 - DAU/MAU -->
          <div class="summary-wrapper">
            <div class="summary-item">
              <div class="label">
                <span>DAU/MAU</span>
              </div>
              <div class="value">
                <i-count-up :startVal="0"
                          :endVal="keyIndicator.dau_mau.customer_num ? Number.parseFloat(keyIndicator.dau_mau.customer_num) : 0"
                          :decimals="2"
                          :duration="2"
                          :options="cuConfig">
                </i-count-up>
              </div>
              <div class="desc">
                <div class="compare">
                  <span :class="[ 'num', Number.parseFloat(keyIndicator.dau_mau.daily) > 0 ? 'rise' : Number.parseFloat(keyIndicator.dau_mau.daily) < 0 ? 'fall' : '' ]">
                    日: {{ keyIndicator.dau_mau.daily === null || keyIndicator.dau_mau.daily === undefined ? '该日无数据，无法展示' : keyIndicator.dau_mau.daily }}</span>
                  <span :class="[ 'mom', Number.parseFloat(keyIndicator.dau_mau.daily) > 0 ? 'rise' : Number.parseFloat(keyIndicator.dau_mau.daily) < 0 ? 'fall' : '' ]">
                    <i class="iconfont" v-show="Number.parseFloat(keyIndicator.dau_mau.daily) > 0">&#xe6ca;</i>
                    <i class="iconfont" v-show="Number.parseFloat(keyIndicator.dau_mau.daily) < 0">&#xe6cb;</i>
                  </span>
                </div>
                <div class="compare">
                  <span :class="[ 'num', Number.parseFloat(keyIndicator.dau_mau.weekly) > 0 ? 'rise' : Number.parseFloat(keyIndicator.dau_mau.weekly) < 0 ? 'fall' : '' ]">
                    周: {{ keyIndicator.dau_mau.weekly === null || keyIndicator.dau_mau.weekly === undefined ? '该日无数据，无法展示' : keyIndicator.dau_mau.weekly }}
                  </span>
                  <span :class="[ 'mom', Number.parseFloat(keyIndicator.dau_mau.weekly) > 0 ? 'rise' : Number.parseFloat(keyIndicator.dau_mau.weekly) < 0 ? 'fall' : '' ]">
                  <i class="iconfont" v-show="Number.parseFloat(keyIndicator.dau_mau.weekly) > 0">&#xe6ca;</i>
                  <i class="iconfont" v-show="Number.parseFloat(keyIndicator.dau_mau.weekly) < 0">&#xe6cb;</i>
                  </span>
                </div>
                <div class="compare">
                  <span :class="[ 'num', Number.parseFloat(keyIndicator.dau_mau.monthly) > 0 ? 'rise' : Number.parseFloat(keyIndicator.dau_mau.monthly) < 0 ? 'fall' : '' ]">
                    月: {{ keyIndicator.dau_mau.monthly === null || keyIndicator.dau_mau.monthly === undefined ? '该日无数据，无法展示' : keyIndicator.dau_mau.monthly }}
                  </span>
                  <span :class="[ 'mom', Number.parseFloat(keyIndicator.dau_mau.monthly) > 0 ? 'rise' : Number.parseFloat(keyIndicator.dau_mau.monthly) < 0 ? 'fall' : '' ]">
                  <i class="iconfont" v-show="Number.parseFloat(keyIndicator.dau_mau.monthly) > 0">&#xe6ca;</i>
                  <i class="iconfont" v-show="Number.parseFloat(keyIndicator.dau_mau.monthly) < 0">&#xe6cb;</i>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 店铺图标 tabs -->
      <div class="compass-tabs">
        <div class="store-summary">
          <div class="summary-title clearfix">
            <div class="name">
              <span class="page-name">活跃度</span>
              <el-tooltip class="instructions" effect="dark" placement="bottom-start">
                <i class="iconfont">&#xe72d;</i>
                <div slot="content">
                  DAU(日活跃顾客数)
                  当日进入过店铺的顾客，当日多次进入店铺仅计算一次活跃顾客
                  <br>
                  <br>
                  WAU(周活跃顾客数)
                  近7日（包括当日）进入过店铺的顾客，7日内多次进入店铺仅计算一次活跃顾客
                  <br>
                  <br>
                  MAU(月活跃用户数)
                  近30日（包括当日）进入过店铺的顾客，30日内多次今日店铺仅计算一次活跃顾客
                  <br>
                  <br>
                  DAU/WAU
                  DAU为选中日活跃顾客数，WAU为选中日前7日（包含选中日）的活跃顾客数，数值越高代表顾客粘度越大
                  <br>
                  <br>
                  DAU/MAU
                  DAU为选中日活跃顾客数，MAU为选中日前30日（包含选中日）的活跃顾客数，数值越高代表顾客粘度越大
                  </div>
              </el-tooltip>
            </div>
          </div>
          <el-row class="summary-main clearfix">
            <el-col :span="8" style="margin-right:20px;">
              <el-date-picker :clearable="false"
                              v-model="choosenDate"
                              type="daterange"
                              size="small"
                              value-format="yyyy-MM-dd"
                              @change = "changeDateRange"
                              :picker-options="pickerOptions"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期">
              </el-date-picker>
            </el-col>
            <el-col :span="8" class="time-options">
              <span :class="[{ active: activeDateOption === 'first' }, 'option']" @click=handleDate(0)>昨天</span>
              <span :class="[{ active: activeDateOption === 'second' }, 'option']" @click=handleDate(1)>7天</span>
              <span :class="[{ active: activeDateOption === 'third' }, 'option']" @click=handleDate(2)>14天</span>
              <span :class="[{ active: activeDateOption === 'fourth' }, 'option']" @click=handleDate(3)>30天</span>
            </el-col>
          </el-row>
        </div>
        <el-tabs v-model="activeTabsName">
          <!-- tab - DAU(日活跃度顾客数) -->
          <el-tab-pane label="DAU(日活跃度顾客数)" name="DAUchartView">
            <div class="customer-number-view data-view">
              <div class="panel-title">
                <span>趋势图</span>
              </div>
              <div class="panel-charts">
                <v-echarts :options="DauChartsOption"></v-echarts>
              </div>
              <div class="panel-title">
                <span>活跃度数据明细</span>
                <span class="save-csv-link" @click="saveDataToDesktop">
                  <i class="iconfont">&#xe68e;</i>
                  导出CSV</span>
              </div>
              <div class="panel-table">
                <el-table :data="currTableData"
                          border
                          size="small"
                          highlight-current-row
                          style="width: 100%">
                  <el-table-column prop="stats_date"
                                   label="时间"
                                   align="center"
                                   sortable
                                   :resizable = "false"
                                   width="180">
                  </el-table-column>
                  <el-table-column prop="daily_number"
                                   align="center"
                                   :sortable = "true"
                                   :resizable = "false"
                                   :sort-by = "['daily_number', 'week_number', 'month_number', 'dau_wau', 'dau_mau', 'stats_date']"
                                   label="DAU">
                    <template slot-scope="scope">{{ scope.row.daily_number !== null && scope.row.daily_number !== undefined ? scope.row.daily_number : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="week_number"
                                   align="center"
                                   :sortable = "true"
                                   :sort-by = "['week_number', 'month_number', 'dau_wau', 'dau_mau', 'daily_number', 'stats_date']"
                                   :resizable = "false"
                                   label="WAU">
                    <template slot-scope="scope">{{ scope.row.week_number !== null && scope.row.week_number !== undefined ? scope.row.week_number : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="month_number"
                                   align="center"
                                   :sortable = "true"
                                   :sort-by = "['month_number', 'dau_wau', 'dau_mau', 'daily_number', 'week_number', 'stats_date']"
                                   :resizable = "false"
                                   label="MAU">
                    <template slot-scope="scope">{{ scope.row.month_number !== null && scope.row.month_number !== undefined ? scope.row.month_number : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="dau_wau"
                                   align="center"
                                   :sortable = "true"
                                   :sort-by = "['dau_wau', 'dau_mau', 'daily_number', 'week_number', 'month_number', 'stats_date']"
                                   :resizable = "false"
                                   label="DAU/WAU">
                    <template slot-scope="scope">{{ scope.row.dau_wau !== null && scope.row.dau_wau !== undefined ? scope.row.dau_wau : 0.00 }}</template>
                  </el-table-column>
                  <el-table-column prop="dau_mau"
                                   align="center"
                                   :sortable = "true"
                                   :sort-by = "['dau_mau', 'daily_number', 'week_number', 'month_number', 'dau_wau', 'stats_date']"
                                   :resizable = "false"
                                   label="DAU/MAU">
                    <template slot-scope="scope">{{ scope.row.dau_mau !== null && scope.row.dau_mau !== undefined ? scope.row.dau_mau : 0.00}}</template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
          <!-- tab - WAU(周活跃度顾客数) -->
          <el-tab-pane label="WAU(周活跃度顾客数)" name="WAUchartView">
            <div class="customer-number-view data-view">
              <div class="panel-title">
                <span>趋势图</span>
              </div>
              <div class="panel-charts">
                <v-echarts :options="WauChartsOption"></v-echarts>
              </div>
              <div class="panel-title">
                <span>活跃度数据明细</span>
                <span class="save-csv-link" @click="saveDataToDesktop">
                  <i class="iconfont">&#xe68e;</i>
                  导出CSV</span>
              </div>
              <div class="panel-table">
                <el-table :data="currTableData"
                          border
                          size="small"
                          highlight-current-row
                          style="width: 100%">
                  <el-table-column prop="stats_date"
                                   label="时间"
                                   align="center"
                                   sortable
                                   :resizable = "false"
                                   width="180">
                  </el-table-column>
                  <el-table-column prop="daily_number"
                                   align="center"
                                   :sortable = "true"
                                   :resizable = "false"
                                   :sort-by = "['daily_number', 'week_number', 'month_number', 'dau_wau', 'dau_mau', 'stats_date']"
                                   label="DAU">
                    <template slot-scope="scope">{{ scope.row.daily_number !== null && scope.row.daily_number !== undefined ? scope.row.daily_number : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="week_number"
                                   align="center"
                                   :sortable = "true"
                                   :sort-by = "['week_number', 'month_number', 'dau_wau', 'dau_mau', 'daily_number', 'stats_date']"
                                   :resizable = "false"
                                   label="WAU">
                    <template slot-scope="scope">{{ scope.row.week_number !== null && scope.row.week_number !== undefined ? scope.row.week_number : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="month_number"
                                   align="center"
                                   :sortable = "true"
                                   :sort-by = "['month_number', 'dau_wau', 'dau_mau', 'daily_number', 'week_number', 'stats_date']"
                                   :resizable = "false"
                                   label="MAU">
                    <template slot-scope="scope">{{ scope.row.month_number !== null && scope.row.month_number !== undefined ? scope.row.month_number : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="dau_wau"
                                   align="center"
                                   :sortable = "true"
                                   :sort-by = "['dau_wau', 'dau_mau', 'daily_number', 'week_number', 'month_number', 'stats_date']"
                                   :resizable = "false"
                                   label="DAU/WAU">
                    <template slot-scope="scope">{{ scope.row.dau_wau !== null && scope.row.dau_wau !== undefined ? scope.row.dau_wau : 0.00 }}</template>
                  </el-table-column>
                  <el-table-column prop="dau_mau"
                                   align="center"
                                   :sortable = "true"
                                   :sort-by = "['dau_mau', 'daily_number', 'week_number', 'month_number', 'dau_wau', 'stats_date']"
                                   :resizable = "false"
                                   label="DAU/MAU">
                    <template slot-scope="scope">{{ scope.row.dau_mau !== null && scope.row.dau_mau !== undefined ? scope.row.dau_mau : 0.00}}</template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
          <!-- tab - MAU(月活跃度顾客数) -->
          <el-tab-pane label="MAU(月活跃度顾客数)" name="MAUchartView">
            <div class="customer-times-view data-view">
              <div class="panel-title">
                <span>趋势图</span>
              </div>
              <div class="panel-charts">
                <v-echarts :options="MauChartsOption"></v-echarts>
              </div>
              <div class="panel-title">
                <span>活跃度数据明细</span>
                <span class="save-csv-link" @click="saveDataToDesktop">
                  <i class="iconfont">&#xe68e;</i>
                  导出CSV</span>
              </div>
              <div class="panel-table">
                <el-table :data="currTableData"
                          border
                          size="small"
                          highlight-current-row
                          style="width: 100%">
                  <el-table-column prop="stats_date"
                                   label="时间"
                                   align="center"
                                   sortable
                                   :resizable = "false"
                                   width="180">
                  </el-table-column>
                  <el-table-column prop="daily_number"
                                   align="center"
                                   :sortable = "true"
                                   :resizable = "false"
                                   :sort-by = "['daily_number', 'week_number', 'month_number', 'dau_wau', 'dau_mau', 'stats_date']"
                                   label="DAU">
                    <template slot-scope="scope">{{ scope.row.daily_number !== null && scope.row.daily_number !== undefined ? scope.row.daily_number : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="week_number"
                                   align="center"
                                   :sortable = "true"
                                   :sort-by = "['week_number', 'month_number', 'dau_wau', 'dau_mau', 'daily_number', 'stats_date']"
                                   :resizable = "false"
                                   label="WAU">
                    <template slot-scope="scope">{{ scope.row.week_number !== null && scope.row.week_number !== undefined ? scope.row.week_number : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="month_number"
                                   align="center"
                                   :sortable = "true"
                                   :sort-by = "['month_number', 'dau_wau', 'dau_mau', 'daily_number', 'week_number', 'stats_date']"
                                   :resizable = "false"
                                   label="MAU">
                    <template slot-scope="scope">{{ scope.row.month_number !== null && scope.row.month_number !== undefined ? scope.row.month_number : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="dau_wau"
                                   align="center"
                                   :sortable = "true"
                                   :sort-by = "['dau_wau', 'dau_mau', 'daily_number', 'week_number', 'month_number', 'stats_date']"
                                   :resizable = "false"
                                   label="DAU/WAU">
                    <template slot-scope="scope">{{ scope.row.dau_wau !== null && scope.row.dau_wau !== undefined ? scope.row.dau_wau : 0.00 }}</template>
                  </el-table-column>
                  <el-table-column prop="dau_mau"
                                   align="center"
                                   :sortable = "true"
                                   :sort-by = "['dau_mau', 'daily_number', 'week_number', 'month_number', 'dau_wau', 'stats_date']"
                                   :resizable = "false"
                                   label="DAU/MAU">
                    <template slot-scope="scope">{{ scope.row.dau_mau !== null && scope.row.dau_mau !== undefined ? scope.row.dau_mau : 0.00}}</template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
          <!-- tab - DAU/WAU -->
          <el-tab-pane label="DAU/WAU" name="DAU/WAUchartView">
            <div class="customer-analyze-view data-view">
              <div class="panel-title">
                <span>趋势图</span>
              </div>
              <div class="panel-charts">
                <v-echarts :options="DauWauChartsOption"></v-echarts>
              </div>
              <div class="panel-title">
                <span>活跃度数据明细</span>
                <span class="save-csv-link" @click="saveDataToDesktop">
                  <i class="iconfont">&#xe68e;</i>
                  导出CSV</span>
              </div>
              <div class="panel-table">
                <el-table :data="currTableData"
                          border
                          size="small"
                          highlight-current-row
                          style="width: 100%">
                  <el-table-column prop="stats_date"
                                   label="时间"
                                   align="center"
                                   sortable
                                   :resizable = "false"
                                   width="180">
                  </el-table-column>
                  <el-table-column prop="daily_number"
                                   align="center"
                                   :sortable = "true"
                                   :resizable = "false"
                                   :sort-by = "['daily_number', 'week_number', 'month_number', 'dau_wau', 'dau_mau', 'stats_date']"
                                   label="DAU">
                    <template slot-scope="scope">{{ scope.row.daily_number !== null && scope.row.daily_number !== undefined ? scope.row.daily_number : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="week_number"
                                   align="center"
                                   :sortable = "true"
                                   :sort-by = "['week_number', 'month_number', 'dau_wau', 'dau_mau', 'daily_number', 'stats_date']"
                                   :resizable = "false"
                                   label="WAU">
                    <template slot-scope="scope">{{ scope.row.week_number !== null && scope.row.week_number !== undefined ? scope.row.week_number : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="month_number"
                                   align="center"
                                   :sortable = "true"
                                   :sort-by = "['month_number', 'dau_wau', 'dau_mau', 'daily_number', 'week_number', 'stats_date']"
                                   :resizable = "false"
                                   label="MAU">
                    <template slot-scope="scope">{{ scope.row.month_number !== null && scope.row.month_number !== undefined ? scope.row.month_number : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="dau_wau"
                                   align="center"
                                   :sortable = "true"
                                   :sort-by = "['dau_wau', 'dau_mau', 'daily_number', 'week_number', 'month_number', 'stats_date']"
                                   :resizable = "false"
                                   label="DAU/WAU">
                    <template slot-scope="scope">{{ scope.row.dau_wau !== null && scope.row.dau_wau !== undefined ? scope.row.dau_wau : 0.00 }}</template>
                  </el-table-column>
                  <el-table-column prop="dau_mau"
                                   align="center"
                                   :sortable = "true"
                                   :sort-by = "['dau_mau', 'daily_number', 'week_number', 'month_number', 'dau_wau', 'stats_date']"
                                   :resizable = "false"
                                   label="DAU/MAU">
                    <template slot-scope="scope">{{ scope.row.dau_mau !== null && scope.row.dau_mau !== undefined ? scope.row.dau_mau : 0.00}}</template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
          <!-- tab - DAU/MAU -->
          <el-tab-pane label="DAU/MAU" name="DAU/MAUchartView">
            <div class="customer-analyze-view data-view">
              <div class="panel-title">
                <span>趋势图</span>
              </div>
              <div class="panel-charts">
                <v-echarts :options="DauMauChartsOption"></v-echarts>
              </div>
              <div class="panel-title">
                <span>活跃度数据明细</span>
                <span class="save-csv-link" @click="saveDataToDesktop">
                  <i class="iconfont">&#xe68e;</i>
                  导出CSV</span>
              </div>
              <div class="panel-table">
                <el-table :data="currTableData"
                          border
                          size="small"
                          highlight-current-row
                          style="width: 100%">
                  <el-table-column prop="stats_date"
                                   label="时间"
                                   align="center"
                                   sortable
                                   :resizable = "false"
                                   width="180">
                  </el-table-column>
                  <el-table-column prop="daily_number"
                                   align="center"
                                   :sortable = "true"
                                   :resizable = "false"
                                   :sort-by = "['daily_number', 'week_number', 'month_number', 'dau_wau', 'dau_mau', 'stats_date']"
                                   label="DAU">
                    <template slot-scope="scope">{{ scope.row.daily_number !== null && scope.row.daily_number !== undefined ? scope.row.daily_number : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="week_number"
                                   align="center"
                                   :sortable = "true"
                                   :sort-by = "['week_number', 'month_number', 'dau_wau', 'dau_mau', 'daily_number', 'stats_date']"
                                   :resizable = "false"
                                   label="WAU">
                    <template slot-scope="scope">{{ scope.row.week_number !== null && scope.row.week_number !== undefined ? scope.row.week_number : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="month_number"
                                   align="center"
                                   :sortable = "true"
                                   :sort-by = "['month_number', 'dau_wau', 'dau_mau', 'daily_number', 'week_number', 'stats_date']"
                                   :resizable = "false"
                                   label="MAU">
                    <template slot-scope="scope">{{ scope.row.month_number !== null && scope.row.month_number !== undefined ? scope.row.month_number : 0 }}</template>
                  </el-table-column>
                  <el-table-column prop="dau_wau"
                                   align="center"
                                   :sortable = "true"
                                   :sort-by = "['dau_wau', 'dau_mau', 'daily_number', 'week_number', 'month_number', 'stats_date']"
                                   :resizable = "false"
                                   label="DAU/WAU">
                    <template slot-scope="scope">{{ scope.row.dau_wau !== null && scope.row.dau_wau !== undefined ? scope.row.dau_wau : 0.00 }}</template>
                  </el-table-column>
                  <el-table-column prop="dau_mau"
                                   align="center"
                                   :sortable = "true"
                                   :sort-by = "['dau_mau', 'daily_number', 'week_number', 'month_number', 'dau_wau', 'stats_date']"
                                   :resizable = "false"
                                   label="DAU/MAU">
                    <template slot-scope="scope">{{ scope.row.dau_mau !== null && scope.row.dau_mau !== undefined ? scope.row.dau_mau : 0.00}}</template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </v-main>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapGetters } from 'vuex'
// components
import MainComp from '@/components/main'
import EchartComp from '@/components/echarts'
// 图标的配置文件
import activenessEchartOption from './activenessEchartOption.js'

// element-ui
import { Row, Col, DatePicker, Tooltip, Tabs, TabPane, Table, TableColumn } from 'element-ui'
/**
 * Vue.js(v2.x+) component wrap for countUp.js(v1.x+)
 * @Documents https://github.com/xlsdg/vue-countup-v2
 */
import ICountUp from 'vue-countup-v2'

/**
 * Parse, validate, manipulate, and display dates in javascript
 * @Documents http://momentjs.com/
 */
import Moment from 'moment'
import { APIGetlivenessCompareData, APIGetLivenessListData } from '@/api/customerSticky.js'
import Config from '@/utils/config.js'

export default {
  name: 'activeness',

  components: {
    // elementUI component
    elRow: Row,
    elCol: Col,
    elDatePicker: DatePicker,
    elTooltip: Tooltip,
    elTabs: Tabs,
    elTabPane: TabPane,
    elTable: Table,
    elTableColumn: TableColumn,
    // countUP component
    ICountUp: ICountUp,
    // 项目自定义组件
    vMain: MainComp,
    vEcharts: EchartComp
  },

  created () {
    // init request
    this.APIGetlivenessCompareData()
    this.APIGetLivenessListData(this.choosenDate)
  },

  data () {
    return {
      // countUp config ============
      cuConfig: {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.'
      },
      // default date option
      activeDateOption: 'second',
      // default tab name
      activeTabsName: 'DAUchartView',
      // echarts option
      DauChartsOption: {},
      WauChartsOption: {},
      MauChartsOption: {},
      DauWauChartsOption: {},
      DauMauChartsOption: {},
      // 用户所选时间
      choosenDate: [Moment().subtract(7, 'day').format('YYYY-MM-DD'), Moment().subtract(1, 'day').format('YYYY-MM-DD')],
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Moment().subtract(1, 'day')
        }
      },
      // 关键指标数据
      keyIndicator: {
        dau: {},
        dau_mau: {},
        dau_wau: {},
        mau: {},
        wau: {}
      },
      activenessData: []
    }
  },

  computed: {
    ...mapGetters([
      'mallId',
      'token'
    ]),
    currTableData () {
      return this.activenessData || []
    }
  },

  methods: {
    saveDataToDesktop () {
      window.location.href = `${Config.CURR_REQ_URL}/api/shops/${this.mallId}/liveness/export?api_token=${this.token}&start_date=${this.choosenDate[0]}&end_date=${this.choosenDate[1]}`
    },
    // 日期选择器
    changeDateRange (value) {
      this.APIGetLivenessListData(value)
    },
    // 时间快捷选择
    handleDate (n) {
      let a = Moment().subtract(1, 'day').format('YYYY-MM-DD')
      switch (n) {
        case 0:
          this.activeDateOption = 'first'
          let b = Moment().subtract(1, 'day').format('YYYY-MM-DD')
          this.choosenDate = [b, a]
          break
        case 1:
          this.activeDateOption = 'second'
          let c = Moment().subtract(7, 'day').format('YYYY-MM-DD')
          this.choosenDate = [c, a]
          break
        case 2:
          this.activeDateOption = 'third'
          let d = Moment().subtract(14, 'day').format('YYYY-MM-DD')
          this.choosenDate = [d, a]
          break
        case 3:
          this.activeDateOption = 'fourth'
          let e = Moment().subtract(30, 'day').format('YYYY-MM-DD')
          this.choosenDate = [e, a]
          break
      }
      this.APIGetLivenessListData(this.choosenDate)
    },
    // 设置echartsOption
    setDauChartsOption () {
      const base = {
        title: {
          text: 'DAU（日活跃度顾客数）',
          left: 'center'
        }
      }
      const series = {
        name: 'DAU',
        type: 'line'
      }
      const DauchartsData = this.activenessData || []
      let option = Object.assign({}, activenessEchartOption, base)
      option.xAxis = Object.assign({}, option.xAxis, { data: DauchartsData.map(item => item.stats_date).reverse() })
      option.series = Object.assign({}, series, {data: DauchartsData.map(item => item.daily_number).reverse()})
      this.DauChartsOption = option
    },
    setWauChartsOption () {
      const base = {
        title: {
          text: 'WAU（周活跃度顾客数）',
          left: 'center'
        }
      }
      const series = {
        name: 'WAU',
        type: 'line'
      }
      const WauchartsData = this.activenessData || []
      let option = Object.assign({}, activenessEchartOption, base)
      option.xAxis = Object.assign({}, option.xAxis, { data: WauchartsData.map(item => item.stats_date).reverse() })
      option.series = Object.assign({}, series, {data: WauchartsData.map(item => item.week_number).reverse()})
      this.WauChartsOption = option
    },
    setMauChartsOption () {
      const base = {
        title: {
          text: 'MAU（月活跃度顾客数）',
          left: 'center'
        }
      }
      const series = {
        name: 'MAU',
        type: 'line'
      }
      const MauchartsData = this.activenessData || []
      let option = Object.assign({}, activenessEchartOption, base)
      option.xAxis = Object.assign({}, option.xAxis, { data: MauchartsData.map(item => item.stats_date).reverse() })
      option.series = Object.assign({}, series, {data: MauchartsData.map(item => item.month_number).reverse()})
      this.MauChartsOption = option
    },
    setDauMauChartsOption () {
      const base = {
        title: {
          text: 'DAU/MAU',
          left: 'center'
        }
      }
      const series = {
        name: 'DAU/MAU',
        type: 'line'
      }
      const dauMauchartsData = this.activenessData || []
      let option = Object.assign({}, activenessEchartOption, base)
      option.xAxis = Object.assign({}, option.xAxis, { data: dauMauchartsData.map(item => item.stats_date).reverse() })
      option.series = Object.assign({}, series, {data: dauMauchartsData.map(item => item.dau_mau).reverse()})
      this.DauMauChartsOption = option
    },
    setDauWauChartsOption () {
      const base = {
        title: {
          text: 'DAU/WAU',
          left: 'center'
        }
      }
      const series = {
        name: 'DAU/WAU',
        type: 'line'
      }
      const dauWauchartsData = this.activenessData || []
      let option = Object.assign({}, activenessEchartOption, base)
      option.xAxis = Object.assign({}, option.xAxis, { data: dauWauchartsData.map(item => item.stats_date).reverse() })
      option.series = Object.assign({}, series, {data: dauWauchartsData.map(item => item.dau_wau).reverse()})
      this.DauWauChartsOption = option
    },
    // this.APIGetStayTimeData(this.choosenDate)
    // ======= API ==================
    APIGetlivenessCompareData (date) {
      APIGetlivenessCompareData({ shop: this.mallId, date: date })
        .then((res) => {
          this.keyIndicator = res.data.stats
        })
    },
    // APIGetLivenessListData, APIGetLivenessCsv
    APIGetLivenessListData (dateRange) {
      let [startDate, endDate] = [dateRange[0], dateRange[1]]
      APIGetLivenessListData({ shop: this.mallId, startDate, endDate })
        .then((res) => {
          this.activenessData = res.data.stats
          this.setDauChartsOption()
          this.setWauChartsOption()
          this.setMauChartsOption()
          this.setDauWauChartsOption()
          this.setDauMauChartsOption()
        })
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less">
  // scoped
  .activeness {
    .activeness-summary {
      width: 100%;
      height: auto;
      box-sizing: border-box;
      background-color: #FFF;
      padding: 10px 20px;
      box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .2);
      .summary-title {
        padding: 10px 0;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #DFDFDF;
        overflow: hidden;
        .name {
          float: left;
          font-weight: bold;
          font-size: 18px;
        }
        .date {
          float: left;
          margin-left: 30px;
          color: #777;
          font-size: 14px;
        }
      }
      .summary-main {
        margin-top: 10px;
        padding: 10px;
        .summary-wrapper {
          float: left;
          margin-left: 2%;
          width: 18.4%;
          &:first-child {
            margin-left: 0;
          }
          .summary-item {
            box-sizing: border-box;
            padding: 20px;
            width: 100%;
            background-color: #FFF;
            border: 1px solid #DFDFDF;
            .label {
              color: #777;
              font-size: 14px;
              .iconfont {
                margin-left: 5px;
              }
            }
            .value {
              padding: 5px 0;
              margin-top: 10px;
              font-size: 32px;
              line-height: 32px;
            }
            .desc {
              font-size: 14px;
              margin-top: 10px;
              .compare{
                margin-top: 10px;
              }
              .num {
                &.rise {
                  color: #E64340;
                }
                &.fall {
                  color: #45C01A;
                }
              }
              .mom {
                font-size: 14px;
                margin-top: 10px;
                &.rise {
                  color: #E64340;
                }
                &.fall {
                  color: #45C01A;
                }
              }
            }
          }
        }
      }
    }
    .compass-tabs {
      box-sizing: border-box;
      margin-top: 20px;
      padding: 10px 20px;
      width: 100;
      background-color: #FFF;
      box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .2);
      .summary-title {
        padding: 10px 0;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #DFDFDF;
        overflow: hidden;
        .name {
          .page-name{
            font-weight: bold;
            font-size: 18px;
          }
          .instructions {
          color: #777;
         }
        }
        .date {
          float: left;
          margin-left: 30px;
          color: #777;
          font-size: 14px;
        }
      }
      .summary-main {
        margin-top: 10px;
        padding: 10px;
        .time-options{
          height: 32px;
          line-height: 32px;
          .option{
            margin-right: 20px;
            font-size: 14px;
            color: black;
            cursor: pointer;
            &.active{
              color: rgb(30, 184, 39);
            }
          }
        }
      }
      .data-view {
        .panel-title {
          font-size: 16px;
          .instructions {
            color: #777;
          }
          .save-csv-link {
            float: right;
            cursor: pointer;
            font-size: 13px;
            color: #0269c8;
          }
        }
        .panel-charts {
          padding: 20px 0;
          width: 100%;
          height: 350px;
        }
        .panel-table {
          padding: 20px 0;
          width: 100%;
        }
      }
    }
  }
</style>
